<template>
  <div>
    <!-- 每个公司都有自己的 业务部门 + 职能部门 -->
    <!-- 阿里： https://2x.antdv.com/ -->
    <!-- 字节： https://semi.design/ -->
    <!-- 腾讯： https://tdesign.tencent.com/-->
    <MyDialog></MyDialog>
    <!-- 具名插槽： 有名称的插槽，现在的需求就是一个组件很多个地方的结构都需要自定义，有外界传递进来修改 -->
    <MyDialog>
      <template v-slot:header>
        <h3>警告</h3>
      </template>
      <template v-slot:body>
        <p>我是外面传递进来的中间结构</p>
      </template>
      <template v-slot:footer>
        <button>注册</button>
      </template>
    </MyDialog>

    <MyDialog>
      <template v-slot:footer>
        <div></div>
      </template>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    MyDialog
  }
}
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>